<template>
  <div class="main">
    <h1 class="main-title">商品列表</h1>
    <div class="main-contain">
      <div class="content-wrapper">
        <el-row :gutter="10">
          <el-col :span="8"><el-button type="primary" @click="addProduct()">添加</el-button></el-col>
          <el-col :span="4"><el-input placeholder="商品编号" v-model="query.commodityNo" clearable class="filter-item"  @keyup.enter.native="searchProduct()"></el-input></el-col>
          <el-col :span="4"><el-input placeholder="商品名称" v-model="query.commodityName" clearable class="filter-item"  @keyup.enter.native="searchProduct()"></el-input></el-col>
          <el-col :span="3">
            <el-select  class="filter-item" placeholder="商品分类" v-model="query.categoryId" clearable @keyup.enter.native="searchProduct()">
              <el-option v-for="(item,index) in CategoryData"
                :key="index"
                :label="item.categoryName"
                :value="item.categoryId">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select  class="filter-item" placeholder="商品状态" v-model="query.status" clearable @keyup.enter.native="searchProduct()">
              <el-option v-for="(item,index) in goodsStatus"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1"><el-button type="primary" @click="searchProduct()">搜索</el-button></el-col>
        </el-row>
        <div class="table-wrapper">
          <el-table :data="productData" stripe border v-loading="$store.state.loading">
            <el-table-column width="50"  label="序号" align="center" fixed="left">
              <template slot-scope="scope">
                {{(page-1)*pageSize + scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="commodityNo" label="SPU" align="center" ></el-table-column>
            <el-table-column prop="commodityName" label="商品名称" align="center"></el-table-column>
            <el-table-column label="商品主图" align="center">
              <template slot-scope="scope" v-if="scope.row.commodityCover">
                <el-tooltip placement="right-start" effect="light" v-for="(item,index) in scope.row.commodityCover.split(',')" :key="index">
                  <div slot="content"><img :src="item" class="tip-pic"/></div>
                  <img :src="item" width="30"/>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="所属分类" align="center"></el-table-column>
            <el-table-column prop="sellAttributes" label="售卖规格" align="center"></el-table-column>
            <el-table-column label="添加时间" align="center" prop="createTime"></el-table-column>
            <el-table-column label="上架状态" align="center"  width="80">
              <template slot-scope="scope">
                <span v-if='scope.row.status===1'>未上架</span>
                <span v-if='scope.row.status===2'>已上架</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="editProduct(scope)">编辑</el-button>
                <el-button type="text" size="mini" @click="detailProduct(scope)">详情</el-button>
                <el-button type="text" size="mini" @click="showProduct(scope)" v-show='scope.row.status===1'>上架</el-button>
                <el-button type="text" size="mini" @click="hideProduct(scope)" v-show='scope.row.status===2'>下架</el-button>
              </template>
            </el-table-column>
          </el-table>
          <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" :views="5" @page-change="pageChange" @size-change="sizeChange"></v-pagination>
        </div>
         <!-- 图片预览 -->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl">
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date.js'
export default {
  data () {
    return {
      // 搜索
      query: {
        commodityNo: '',
        commodityName: '',
        categoryId: '',
        status: ''
      },
      time: '',
      // 分页
      page: (this.$route.query.pg - 0) || 1,
      pageSize: (this.$route.query.size - 0) || 10,
      total: 0,
      CategoryData: [], // 商品分类
      productData: [],
      // 商品状态
      goodsStatus: [{
        value: '1',
        label: '未上架'
      }, {
        value: '2',
        label: '已上架'
      }],
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  mounted () {
    this.productList()
    this.categroyList()
  },
  methods: {
    // 列表
    productList () {
      this.$store.commit('setLoading', true)
      let params = {
        'page': this.page,
        'pageSize': this.pageSize,
        'type': 'pc',
        'commodityNo': this.query.commodityNo,
        'commodityName': this.query.commodityName,
        'categoryId': this.query.categoryId,
        'status': this.query.status
      }
      this.$http.post(this.$api + '/commodity/selective', params).then(res => {
        if (res.responseCode === '0000') {
          this.productData = res.data.list
          this.productData.forEach(item => {
            this.time = formatDate(new Date(item.createTime), 'yyyy-MM-dd hh:mm:ss')
            item.createTime = this.time
          })
          this.total = res.data.total
          this.$store.commit('setLoading', false)
        } else {
          this.$message.error({
            message: res.responseMsg
          })
          this.$store.commit('setLoading', false)
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
        this.$store.commit('setLoading', false)
      })
    },
    // 搜索
    searchProduct () {
      this.productList()
    },
    // 添加
    addProduct () {
      this.$router.push({
        path: '/goods/addGoods',
        query: {
          type: 1,
          pg: this.page,
          size: this.pageSize
        }
      })
    },
    // 编辑
    editProduct (scope) {
      this.$router.push({
        path: '/goods/addGoods',
        query: {
          type: 2,
          pg: this.page,
          size: this.pageSize,
          commodityId: scope.row.commodityId
        }
      })
    },
    // 详情
    detailProduct (scope) {
      this.$router.push({
        path: '/goods/addGoods',
        query: {
          type: 3,
          pg: this.page,
          size: this.pageSize,
          commodityId: scope.row.commodityId
        }
      })
    },
    // // 显示隐藏
    showProduct (scope, status) {
      this.$confirm('确认上架该商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          'commodityId': scope.row.commodityId
        }
        this.$http.post(this.$api + '/commodity/updateCommodityStatus', params).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              message: res.responseMsg,
              type: 'success'
            })
            this.productList()
          } else {
            this.$message({
              message: res.responseMsg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    hideProduct (scope, status) {
      this.$confirm('确认下架该商品？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          'commodityId': scope.row.commodityId
        }
        this.$http.post(this.$api + '/commodity/updateCommodityStatus', params).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              message: res.responseMsg,
              type: 'success'
            })
            this.productList()
          } else {
            this.$message({
              message: res.responseMsg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 商品分类
    categroyList () {
      this.$http.post(this.$api + '/commodity/findAllCommodityCategory', {}).then(res => {
        if (res.responseCode === '0000') {
          this.CategoryData = res.data
        } else {
          this.$message.error({
            message: res.responseMsg
          })
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 分页
    sizeChange (size) {
      this.pageSize = size
      this.productList()
    },
    pageChange (val) {
      this.page = val
      this.productList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-tooltip{
    margin-top: 6px
  }
  .el-row {
    margin: 10px 0;
  }
  .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
    width: 100%;
  }
  .el-pagination{
    margin-bottom: 20px;
  }
</style>
